import React from 'react';
import style from './style.less';
import echarts from 'echarts';

class PieTable extends React.Component {

    constructor( props ) {
        super( props )
        this.state = {
            table: '',
            timer:''
        }
    }

    resizeEvent = () => {
        if(this.state.timer){
            clearTimeout(this.state.timer);
        }

        const timer = setTimeout(() => {
            this.state.table.resize();
        }, 200);

        this.setState({
            timer: timer
        })
    }

    componentDidMount() {

        const table = echarts.init( document.getElementById( 'pieTable' ) );

        table.setOption( {
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                x: 'left',
                data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
            },
            series: [
                {
                    name:'访问来源',
                    type:'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data:[
                        {value:335, name:'直接访问'},
                        {value:310, name:'邮件营销'},
                        {value:234, name:'联盟广告'},
                        {value:135, name:'视频广告'},
                        {value:1548, name:'搜索引擎'}
                    ]
                }
            ]
        } );

        this.setState( {
            table: table
        }, () => {
            this.state.table.resize();
        } );

        window.addEventListener( 'resize', this.resizeEvent, false )
    }

    componentWillUnmount() {
        window.removeEventListener( 'resize', this.resizeEvent, false );
    }

    render() {
        return (
            <div className={style.pieTable}>
                <span className={style.title}>环形图</span>
                <div className={style.table} id='pieTable'></div>
            </div>
        )
    }
}

export default PieTable;